<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue-router</title>
	<!--引入Vue库-->
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
</head>
<body>	
<div id="app">
<p>
    <!-- 使用router-link组件来导航. -->
    <!-- 通过`to`属性指定链接. -->
    <!-- <router-link>默认会被渲染成一个`<a>`标签 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// （1）如果使用模块化机制编程，需要先导入Vue和VueRouter，
// import Vue from 'vue'
// import VueRouter from 'vue-router'
// Vue.use(VueRouter)
// （2）定义（路由）组件	  
const Login = { template: '<div>打开登录页面</div>' }
const Register = { template: '<div>打开注册页面</div>' }
// （3）定义路由
// 每个路由应该映射一个组件，其中"component"可以是
// 通过Vue.extend()创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
    { path: '/login', component: Login },
    { path: '/register', component: Register }
  ]
// （4）创建router实例，然后传`routes`配置，当然还可以传别的配置参数
const router = new VueRouter({
      routes // （缩写形式）相当于 routes: routes
    })
// （5）创建和挂载根实例。
// 要通过 router 配置参数注入路由，从而让整个应用都有路由功能
const vm= new Vue({
      el:'#app',
      router
    })
</script>
</body>
</html>
